<template>
    <div>
      <!-- 搜索 -->
      <el-form :inline="true" :model="SelectedInfo" class="demo-form-inline" style="margin-top: 10px;">
        <el-form-item label="咨询师等级名称：">
        <el-input v-model="SelectedInfo.name" style="width: 240px;" placeholder="请输入咨询师等级名称" clearable />
        </el-form-item>
        <el-button type="primary" @click="getConsultlevel">搜索</el-button>
    </el-form>
    <el-button  @click="toAdd" type="primary" icon="Plus" plain style="margin-bottom: 15px;">新增</el-button>
    <el-button link @click="handleBatchDelete" icon="Delete" plain style="margin-bottom: 15px;">批量删除</el-button>
        <!-- 表格 -->
        <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="100" align="center" />
      <el-table-column fixed prop="id" label="等级编号" width="150" align="center" />
      <el-table-column prop="name" label="咨询师等级名称" width="240" align="center" />
      <el-table-column fixed="right" label="操作" align="center" >
        <template #default="scope" >
          <el-button link type="primary" size="large" @click="toEdit(scope.row)">修改</el-button>
          <el-button size="large" link type="danger" @click="onDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
        </el-table>
  <!-- 添加，编辑弹框 -->
  <el-dialog v-model="saveOrUpdateVisiable" :title="saveOrUpdateTitle" width="500">
  <el-form :model="consultlevel">
    <el-form-item label="咨询师等级编号" label-width="120px">
      <el-input v-model="consultlevel.id" placeholder="请输入咨询师等级编号" disabled></el-input>
      </el-form-item>
    <el-form-item label="咨询师等级" label-width="120px">
      <el-input v-model="consultlevel.name" placeholder="请输入咨询师的等级"></el-input>
      </el-form-item>
</el-form>
<template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          {{saveOrUpdateTitle}}
        </el-button>
      </div>
    </template>
</el-dialog>
         <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 4, 8, 10]"
      size="default"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
const tableData = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(9);
const saveOrUpdateVisiable = ref(false);
const saveOrUpdateTitle=ref("添加")
//选中的行数据
const selectedRows=ref([]);
onMounted(()=>{
    getConsultlevel();
})
const SelectedInfo=ref({
    pageNum:'1',
    pageSize:'8',
    name:'',
  })

const getConsultlevel=()=>{
    axios.get('/consult-level/selectAll',{params:SelectedInfo.value})
    .then(res=>{
        // console.log(res.data);
        let result=res.data;
        if(result.code==1){
            total.value=result.data.total;
            tableData.value=result.data.list
        }else{
            console.log("获取咨询师等级失败");
            
        }
    })
}
//定义分页
const handleSizeChange = (val) => {
  SelectedInfo.value.pageSize=val;
  SelectedInfo.value.pageNum=1;
  getConsultlevel();
}
const handleCurrentChange = (val) => {
  SelectedInfo.value.pageNum=val;
 getConsultlevel();
}
// 删除
const onDel =id=>{
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
      //调用后端接口删除
      axios.delete('/consult-level/'+id)
        .then(resp=>{
            // console.log(resp.data)
            let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R 
            if(result.code==1){
                // 重新获取列表
                getConsultlevel();
                ElMessage({
                    message: '删除成功！',
                    type: 'success',
                })
            }else{
                ElMessage({
                    message: '删除失败！',
                    type: 'warning',
                })
            }
        })
   })
  }
  //添加或修改
  const consultlevel=ref({
    id:'',
    name:''
  })
  //去修改的页面
const toEdit = (row)=>{
    saveOrUpdateVisiable.value=true;
    saveOrUpdateTitle.value="修改";
    consultlevel.value=row;
}
//去添加的页面
const toAdd = ()=>{
    saveOrUpdateVisiable.value=true;
    saveOrUpdateTitle.value="添加";
    consultlevel.value={
    id:'',
    name:''
    }
}
//取消修改或保存
const close = ()=>{
    saveOrUpdateVisiable.value=false;
    consultlevel.value={
      id:'',
      name:''
    }
}
//保存或修改
const saveOrUpdate = ()=>{
  if(!consultlevel.value.name?.trim){
   ElMessage.error("咨询师等级不能为空");
   return;
  }
    if(saveOrUpdateTitle.value==="添加"){
      //调用后接口添加
      axios.post('/consult-level',consultlevel.value)
       .then(resp=>{
            // console.log(resp.data)
            let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R  
            if(result.code==1){
                // 重新获取列表
                pageNum.value = 1;
                SelectedInfo.value.pageNum = 1;
                getConsultlevel();
                saveOrUpdateVisiable.value=false;
                // 重置分页到第一页
          pageNum.value = 1;
          SelectedInfo.value.pageNum = 1;
            }else{
               console.log("添加等级失败");
               saveOrUpdateVisiable.value=false;
            }
        })
        .catch(error=>{
          ElMessage.error("请求异常")
        });
       }else{
        //调用后接口修改
        axios.put('/consult-level',consultlevel.value)
        .then(resp=>{
            let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
            if(result.code==1){
                // 重新获取列表
                pageNum.value=1;
                SelectedInfo.value.pageNum=1;
               getConsultlevel();  
                saveOrUpdateVisiable.value=false;
            }else{
               console.log("修改等级失败");
               saveOrUpdateVisiable.value=false;
            }
        });
        //关闭弹框
        saveOrUpdateVisiable.value=false;
        consultlevel.value={
          id:'',
          name:''
        }
      };
    }
  //处理选中行变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的等级名称');
    return;
  }

  ElMessageBox.confirm(
    '确认删除选中的该等级吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    const ids = selectedRows.value.map(row => row.id); // 获取选中的行的 ID
    axios.delete('/consult-level/deleteBatch', { data: ids }) // 发送批量删除请求
      .then(res => {
        let result = res.data;
        if (result.code === 1) {
          ElMessage.success('批量删除成功');
          getConsultlevel(); // 刷新列表
        } else {
          ElMessage.error('批量删除失败');
        }
      })
      .catch(err => {
        console.error('批量删除失败:', err);
        ElMessage.error('批量删除失败');
      });
  })
};
</script>

<style scoped>

</style>